<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quality - ECharts</title>

<!-- 引入jquery.js -->
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style=" height: 400px;"></div>

	<script type="text/javascript">
	var worldMapContainer = document.getElementById('main');
	//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-30)+'px';
        worldMapContainer.style.height = (window.innerHeight-30)+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
	var myChart = echarts.init(worldMapContainer);
		// 显示标题，图例和空的坐标轴
		var option = {
		    title: {
		        text: "客户投诉统计",
		        x: "center"
		    },
		    tooltip: {
		        trigger: "axis"
		    },
		    toolbox: {
		        show: false,
		        feature: {
		            mark: {
		                show: true
		            },
		            dataView: {
		                show: true,
		                readOnly: true
		            },
		            magicType: {
		                show: false,
		                type: ["line", "bar"]
		            },
		            restore: {
		                show: true
		            },
		            saveAsImage: {
		                show: true
		            }
		        }
		    },
		    legend: {
		    	top:25,
		        data:['总投诉', '质量投诉']
		    },
		    calculable: true,
		    xAxis: [
		    	{
		            type: 'category',
		            boundaryGap: true,
		            data: (function (){
		                var now = new Date();
		                var mm = now.getMonth()+1;//当前月份
		                var dd = now.getDate();//获取当前日
		                var res = [];
		                var len = 5;
		                while (len--) {
		                    if(mm>=1 && dd>=1){
		                       res.unshift(mm+"月"+dd+"日"); 
		                       now = new Date(now - 86400000);
				               mm = now.getMonth()+1;//当前月份
				               dd = now.getDate();//获取当前日
		                    }
		                }
		                return res;
		            })()
		        }
		    ],
		    yAxis: [
		        {
		            type: "value",
		            axisLine: {
		                show: false
		            }
		        }
		    ],
		    series: [
		        {
		            name: "总投诉",
		            type: "bar",
		            itemStyle: {
		                 normal: {
		                     label: {
		                         show: true,
		                     }
		                 }
		            },
			        data:(function (){
			        	var now = new Date();
		                var mm = now.getMonth()+1;//当前月份
		                var dd = now.getDate();//获取当前日
		                var res = [];
		                var len = 5;
		                while (len--) {
		                	if(mm>=1 && dd>=1){
		                    res.push(Math.round(Math.random() * 5)+5);
		                	}
		                }
		                return res;
		            })()
		        },
		        {
		            name: "质量投诉",
		            type: "bar",
		            itemStyle: {
		                 normal: {
		                     label: {
		                         show: true,
		                     }
		                 }
		            },
			        data:(function (){
			        	var now = new Date();
		                var mm = now.getMonth()+1;//当前月份
		                var dd = now.getDate();//获取当前日
		                var res = [];
		                var len = 5;
		                while (len--) {
		                	if(mm>=1 && dd>=1){
		                    res.push(Math.round(Math.random() * 5)+1);
		                	}
		                }
		                return res;
		            })()
		        }
		    ]
		}
		myChart.setOption(option);
		window.onresize = myChart.resize;
	</script>
</body>
</html>